<!--
 * @Author: your name
 * @Date: 2021-07-15 15:47:46
 * @LastEditTime: 2021-08-23 18:20:21
 * @LastEditors: yuechong
 * @Description: In User Settings Edit
 * @FilePath: \pyxqzhifa\src\components\enfore\echarts\reportrend.vue
-->
<template>
  <div class="reportrend_echarts" id="reportrend" ref="reportrend"></div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'reportrend',
  data() {
    return {}
  },
  mounted() {
    // this.initReportRend()
  },
  methods: {
    initReportRend(timeData, vlaueData) {
      var myChart = this.$echarts.init(document.getElementById('reportrend'))
      var option
      option = {
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: timeData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#8097B1'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#8097B1'
            }
          }
        },
        grid: {
          show: true,
          top: '9%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          width: '94%',
          height: '83%'
        },
        yAxis: {
          show: true,
          type: 'value',
          // data: [0, 15, 30, 50, 70, 90, 100],
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#8097B1'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#8097B1'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            // data: [5, 10, 10, 15, 20, 25, 30],
            data: vlaueData,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(46,91,255,.8)'
                    },
                    {
                      offset: 1,
                      color: '#E7EBF4'
                    }
                  ],
                  false
                )
              }
            },
            type: 'line',
            connectNulls: true,
            itemStyle: {
              color: 'rgba(46,91,255,.8)',
              borderCap: 'round',
              borderWidth: 10
            },
            lineStyle: {
              borderWidth: 5,
              color: 'rgba(46,91,255,.8)'
            },
            label: {
              show: true,
              formatter: '{c}'
            }
          }
        ]
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.reportrend_echarts {
  width: 100%;
  height: 100%;
  :deep(div) {
    width: 100% !important;
    height: 100% !important;
  }
  :deep(canvas) {
    height: 90% !important;
  }
}
</style>
